<template>
  <div class="app-search _main_y">
    <!-- 搜索框部分 start -->
    <div class="search-input _main_x _align_center">
      <Back :frompath="frompath"></Back>
      <div class="input-box _main_x">
        <i class="_bgimg_content"></i>
        <input v-focus type="text" :placeholder="nowword" >
      </div>
      <span class="search-btn">搜索</span>
    </div>
    <!-- 搜索框部分 end -->
    <!-- 热搜 start -->
    <div class="hot-search _flex_y">
      <h3>热门搜索</h3>
      <ul class="hot-words _wrap">
        <li v-for="hotword in hotwords" :key="hotword.id">
         {{ hotword.word}}
        </li>
      </ul>
    </div>
    <!-- 热搜 end -->
    <!-- 搜索记录 start -->
    <!-- 搜索记录 end -->
  </div>
</template>

<script>

export default {
  data(){
    return{
      frompath:'',
      nowword:'',
      hotwords:[]
    }  
  },
  directives: {	
        focus: {	 
             inserted: function (el) {	         
                      el.focus();	        
                 }	 
                  }
                	},

  beforeRouteEnter (to, from, next) {
    next((_this)=>{
      // 保存路由跳转来源地址
      _this.frompath=from.path
      // 把路由传参来的搜索词给保存到本组件变量nowwprd，方便给input绑定placeholder属性
      _this.nowword=_this.$route.query.nowword
      // 提取把路由传来的数据 拿其中的10个数据
      let hotwordsData=_this.$route.params.data
    //  console.log(hotwordsData.slice(0,10)) 
      _this.hotwords=hotwordsData.slice(0,10)
    })
  }
  
  
};
</script>

<style lang="stylus" scoped>
.search-input
  height 0.42rem
  color #4c4c4c
  .input-box
    width 2.68rem
    height 0.33rem
    margin-left 0.08rem
    position relative
    i
      position absolute
      width 0.19rem
      height 0.19rem
      padding 0.07rem
      background-image url('../../assets/images/icon_search.png')
    input
      border-radius .05rem
      width 2.02rem
      padding 0 0.33rem
      border 0
      outline 0
      background rgba(155, 155, 155, 0.1)
  .search-btn
    width 0.4rem
    height 0.25rem
    line-height 0.25rem
    text-align center
    padding 0 0.08rem
    font-size 0.15rem
.hot-search
  color #333333
  padding .16rem
  margin-bottom .08rem
  h3
    font-size .13rem
    
    padding .05rem 0 .02rem
  ul
    li
      height .25rem
      line-height .25rem
      padding 0 .125rem
      margin .07rem 0 .07rem .08rem
      background-color #F9F9F9
</style>

